<!--
 * @Author: your name
 * @Date: 2021-09-07 18:09:45
 * @LastEditTime: 2021-09-13 19:43:40
 * @LastEditors: DESKTOP-3LI1LES
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\role\privilege.vue
-->

<!-- 角色相关接口中的查询所有   /role/cascadePrivilegeFindAll-->
<template>
    <div class="production">
        <div class="btns">
            <!-- {{params}} -->
            <!-- 检索和分页调用的是同一个接口 -->
            <!-- 检索框 ，这里使用的是行内表单，表单项在一行显示，size控制表单域下组件尺寸-->
                <!-- 为添加按钮添加点击事件，弹出模态框 -->
            <el-button @click="toAddHandler" type="primary" size="small" style="margin-right:10px">添加</el-button>
        </div>
        <!-- 内容区域，放表格和分页显示 -->
        <div class="content">
            <!-- 表格 -->
            <el-table :data="resData" style="width:100%" size="small">
                <!-- 设置type属性为index即可显示从 1 开始的索引号,没有数据的话出不来，有数据的话会按顺序排号 -->
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="路径" prop="route"></el-table-column>
                <el-table-column label="类型" prop="type"></el-table-column>
                <el-table-column label="序号" prop="num"></el-table-column>
                <el-table-column label="图标" prop="icon"></el-table-column>
                <el-table-column label="状态" prop="">
                    <template>
                        <el-tag type="success">显示</el-tag>
                    </template>
                </el-table-column>
                <!-- 操作这块不需要有字段 -->
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="text" @click="editHandler(scope.row)" style="color:green">编辑</el-button>
                        <el-button type="text" style="color:red" @click="delHandler(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- 经常被别的组件调用的数据，一般放在状态机里面 -->
            <!-- current-page表示当前页数的改变，支持.sync修饰符，size-change表示每页条数的改变-->
            <!-- page-sizes表示每页显示个数选择器的选项设置，为number类型的数组 -->
            <!-- page-sizes表示每页显示个数选择器的选项设置，为number类型的数组 -->
            <!-- layout控制显示效果，prev表示左箭头，pager表示页码，next表示右箭头 ,size表示显示调整每页显示条数-->
            <!-- element-ui想用中文版的在main.js里面找 -->
            <!-- 模态框，点击添加按钮时出现 -->
            <!-- @close表示的是Dialog关闭时的回调 -->
            <el-dialog :title="title" :visible.sync="visible" @close="dialogCloseHandler">
                <!-- 表单校验是通过rules属性传入约定的校验规则，el-form-item中的prop属性设为需校验的字段名 -->
                <el-form :model="production" :rules="rules" ref="saveForm">
                    <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="production.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="路径" :label-width="formLabelWidth" prop="route">
                        <el-input v-model="production.route" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
                        <el-select v-model="production.type" clearable placeholder="请选择所属栏目">
                        <el-option 
                            v-for="(item,index) of categories"
                            :label="item.type"
                            :value="item.id"
                            :key="index"
                        >
                        </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="父权限" :label-width="formLabelWidth" prop="num">
                        <el-select v-model="production.name" clearable placeholder="请选择所属栏目">
                        <el-option 
                            v-for="(item,index) of categories"
                            :label="item.name"
                            :value="item.id"
                            :key="index"
                        >
                        </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="序号" :label-width="formLabelWidth" prop="num">
                        <el-input v-model="production.num" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" :label-width="formLabelWidth" prop="description">
                        <el-input type="textarea" v-model="production.description" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button type="primary" @click="toSaveHandler">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import request from '@/utils/request';//导入整个模块
import { mapActions } from "Vuex" ;
import qs from "qs";
import _ from "lodash";
// import { title } from '@/settings';】

export default {
  data(){
      return {
          params:{
            //   下面两项为必填项
              page:1,//表示当前页
              pageSize:5,//当前页的大小
          },
          resData:{},
          categories:[],//遍历对应的栏目
        //   img标签当成字符串,然后返回content
        //   content:'<img :src="scope.row.photo" alt="图片丢失" width="200">',
          title:'',
          visible:false,//模态框是否可见，初始值设为false
          production:{},//模态框中表单数据
          formLabelWidth:"80px",//form表单中标签的宽度
          imageUrl:null,
          rules:{//必填项的校验规则
              name:[
                  {require: true, message:"权限称不能为空",trigger:"blur"},
              ],
              route:[
                  {required: true, message: "路径不能为空", trigger: "blur"}
              ],
              type:[
                  {require: true, message: "请选择类型", trigger:"blur"}
              ]
          }    
      }
  },
  methods:{
    //   导入状态机中的方法（在methods里面写，通过辅助函数）,mapActions工具函数会将store中的dispatch方法映射到组件的methods中
    // 第一个参数category是模块名字，从哪个模块导入进来的，第二个参数是方法
    ...mapActions("type",["findAllType"]),


    //分页查询产品表格，请求后台数据 ，声明异步函数，用await接收返回一个对象  
    async pageQueryProductions(){
        // 第一个参数为地址，get方法传参，不能直接写参数，先写个对象，对象里面为params:对象
        let res=await request.get('/privilege/findAll',{
            params:this.params
        })
        this.resData=res.data;
    },
    //   page改变事件
    pageChangeHandler(page){//先拿到params里面的page得到最新数据，根据最新数据,再做一次请求
        this.params.page=page;
        this.pageQueryProductions();//根据最新数据进行一次请求
    },
    // pageSize改变事件
    pageSizeChangeHandler(pageSize){
        this.params.pageSize=pageSize;
        this.pageQueryProductions();
    },
    // 新增按钮
    toAddHandler(){
        this.production={};//表示打开模态框之前清空模态框的表单
        this.imageUrl=null;//打开模态框之前清空封面图片
        this.title="添加权限";
        this.visible=true;//打开模态框
    },
    // 图片上传成功的回调
    handlePhotoSuccess(res,file){
        // 将返回的图片在线地址映射到数据模型中
        this.production.photo=res;
        this.imageUrl=res;
    },
    // 表单保存事件
    toSaveHandler(){
        this.$refs["saveForm"].validate((valid)=>{
            if(valid){
                request
                    .post("/producsaveOrUpdate",qs.stringify(this.production)).then((res)=>{
                        this.pageQueryProductions();//重新加载数据
                        this.$message.success(res.message);//提示操作结果信息
                        this.visible=false;//关闭模态框
                    })
            }else{
                return false;
            }
        });
    },
    // 模态框关闭的回调，这里面进行的是表单验证的置空
    dialogCloseHandler(){//当在打开模态框前置空的话，会报this.$refs["saveForm"].resetFields未被定义
        this.$refs["saveForm"].resetFields();//置空表单验证
    },
    // 编辑按钮点击事件
    editHandler(row){
        this.production = _.clone(row); //将当前行数据赋值给数据类型
        this.imageUrl=row.icon;//对当前行进行编辑时，图片要显示
        this.title="编辑权限";
        this.visible=true;
    },
    // 删除当前行数据
    delHandler(id) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        requset.get("/baseUser/deleteById", { params: { id } }).then((res) => {
          this.pageQueryProductions(); // 刷新数据
          this.$message({
            type: "success",
            message: res.message,
          }); // 提示成功信息
        });
      });
    },
  },
  created(){
      this.pageQueryProductions();//分页查询产品
      this.findAllType().then(res=>{
          this.categories=res.data;
      });//查询所有产品栏目
  }
}
</script>

<style>
/* 这里不能写scope,因为它是局部作用域 */
/* // less-loader报错的话，先将lang="less"删除掉，用普通的语法 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>